<template>
  <el-container id="page">
    <el-aside>
        <el-row class="tac hidden-xs-only" id="sidebar">
          <el-menu
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            :default-active="activePage"
            mode="vertical"
            class="el-menu-vertical-demo h100"
            :collapse="isCollapse"
            router="true"
          >
            <el-menu-item index="home">
              <i class="el-icon-s-home"></i>
              <span slot="title">Home</span>
            </el-menu-item>
            <el-menu-item index="files">
              <i class="el-icon-files"></i>
              <span slot="title">File</span>
            </el-menu-item>
            <el-menu-item index="settings">
              <i class="el-icon-setting"></i>
              <span slot="title">Config</span>
            </el-menu-item>
          </el-menu>
      </el-row>
      </el-aside>
    <el-container>
      <el-header class="p-0 m-0">
      <el-menu
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :default-active="activePage"
        mode="horizontal"
        class="h100 hidden-sm-and-up"
        router="true"
      >
        <el-row type="flex" justify="center">
          <el-menu-item index="home">
            <i class="el-icon-s-home"></i>
            <span slot="title">Home</span>
          </el-menu-item>
          <el-menu-item index="files">
            <i class="el-icon-files"></i>
            <span slot="title">File</span>
          </el-menu-item>
          <el-menu-item index="settings">
            <i class="el-icon-setting"></i>
            <span slot="title">Config</span>
          </el-menu-item>
        </el-row>
      </el-menu>
      <el-menu mode="horizontal" class="hidden-xs-only">
        <el-row type="flex" justify="center">
          <el-col :span="16">
            <el-row type="flex" justify="space-between">
              <el-menu-item><img src="../../public/RecStream.png"></el-menu-item>
              <el-dropdown trigger="click">
                <el-menu-item>
                  <span>admin</span><i class="el-icon-caret-bottom"></i>
                </el-menu-item>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>用户信息</el-dropdown-item>
                  <el-dropdown-item>注销</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-row>
          </el-col>
        </el-row>
        
      </el-menu>
    </el-header>
      
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
let store = {
  debug: true,
  state: {
    page: "Home",
  },
};

export default {
  data: function () {
    return {
      isCollapse: true,
      shareState: store,
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    tolink(link, page) {
      console.log(link);
      this.activePage = page;
      this.$router.push(link);
    },
  },
};
</script>

<style>
html,
body,
#app {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'Fira Code';
}
.el-header,
.el-footer {
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  color: #333;
  text-align: center;
  line-height: 200px;
  width: auto !important;
}

.el-main {
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
#page {
  height: 100%;
}
#sidebar {
  height: 100%;
}
#sidebar el-menu,
#sidebar el-col {
  height: 100%;
}
.h100 {
  height: 100%;
}

.p-0 {
  padding: 0 !important;
}

.m-0 {
  margin: 0 !important;
}

img {
  height: 60%;
}
</style>
